<template>
    <nut-popup position="bottom" :visible="props.show" @click-overlay="close" @click-close-icon="close">
        <nut-picker v-model="selectedCascader" :columns="cascaderColumns" title="城市选择" @confirm="confirm"></nut-picker>
    </nut-popup>
</template>
    
<script lang="ts" setup>
import { ref } from "vue";
import { useDidShow } from "@tarojs/taro";
import { getCompany } from "@/@api/order";
import useOrderStore from '@/store/order'
import { Heart } from '@nutui/icons-vue-taro';
import { onMounted } from "vue";
export interface AddressList {
    code: string;
    children?: AddressList[];
    id: number;
    name: string;
}
const orderStore = useOrderStore()
function toDistrictTree(addressList: any) {
    return addressList.map(it => {

        return {
            text: it.name,
            value: it.name,
            children: it.children ? toDistrictTree(it.children) : null
        }
    })
}


useDidShow(async () => {
    console.log('useDidShowselect');



});

onMounted(async () => {
    if (orderStore.companyTrue.length) {
        cascaderColumns.value = orderStore.companyTrue
        console.log(orderStore.companyTrue, 36);
    } else {
        const res = await getCompany({
            showallbranchs: "true",
            showonlyTF: 'true',
        })
        console.log(res, 41);

        orderStore.companyTrue = toDistrictTree(res.data.info)
        cascaderColumns.value = toDistrictTree(res.data.info)
        console.log(orderStore.companyTrue, 38);

    }
})



const props = defineProps<{
    addressInfo?: string[];
    showonlyTF: string;
    show: boolean;
}>();

const selectedCascader = ref(["福建省", "福州市", "鼓楼区"]);
const cascaderColumns = ref([
    {
        text: "浙江",
        value: "ZheJiang",
        children: [
            {
                text: "杭州",
                value: "HangZhou",
                children: [
                    { text: "西湖区", value: "XiHu" },
                    { text: "余杭区", value: "YuHang" },
                ],
            },
            {
                text: "温州",
                value: "WenZhou",
                children: [
                    { text: "鹿城区", value: "LuCheng" },
                    { text: "瓯海区", value: "OuHai" },
                ],
            },
        ],
    },
    {
        text: "福建",
        value: "FuJian",
        children: [
            {
                text: "福州",
                value: "FuZhou",
                children: [
                    { text: "鼓楼区", value: "GuLou" },
                    { text: "台江区", value: "TaiJiang" },
                ],
            },
            {
                text: "厦门",
                value: "XiaMen",
                children: [
                    { text: "思明区", value: "SiMing" },
                    { text: "海沧区", value: "HaiCang" },
                ],
            },
        ],
    },
]);
console.log(cascaderColumns, 107);



function confirm({ selectedValue, selectedOptions }) {
    console.log(selectedValue, selectedOptions);

    emit("selectAddress", selectedCascader.value);
    close()
}

const emit = defineEmits<{
    (e: "selectAddress", args: string[]): void;
    (e: "close"): void;
}>();
// 基础用法
const address = ref<{
    visible: boolean;
    value: string[];
    options: AddressList[];
}>({
    visible: false,
    value: [],
    options: [],
});

async function getAddress() {
    console.log('getAddress');


    const res = await getCompany({
        showallbranchs: "true",
        showonlyTF: props.showonlyTF,
    })
    orderStore.companyFalse = res.data.info
    address.value.options = res.data.info;


}
orderStore.companyFalse.length ? address.value.options = orderStore.companyFalse : getAddress()



function close() {
    emit('close')
}
</script>
    
<style>
.container_select_address {
    height: 100rpx;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
</style> 